<template>
<div class="pb50" v-loading="loading">
    <!--内容-->
    <div class="product-content">
      <!--基本信息-->
      <div class="common-form">{{$t('order.basic_info')}}</div>
      <div class="table-wrap">
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.order_number_label')}}</span>
              {{ detail.orderNo }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.buyer_label')}}</span>
              {{ detail.nickName }}
              <span>{{$t('order.user_id_label',{place1:detail.userId})}}</span>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.order_amount_label')}}</span>
              {{ detail.orderPrice }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.freight_amount_label')}}</span>
              {{ detail.expressPrice }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16" v-if="detail.couponMoney > 0">
              <span class="gray9">{{$t('order.coupon_deduction_label')}}</span>
              {{ detail.couponMoney }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16" v-if="detail.pointsMoney > 0">
              <span class="gray9">{{$t('order.points_deduction_label')}}</span>
              {{ detail.pointsMoney }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16" v-if="detail.fullreduceMoney > 0">
              <span class="gray9">{{$t('order.full_discount_label')}}</span>
              {{ detail.fullreduceMoney }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16" v-if="detail.productReduceMoney > 0">
              <span class="gray9">{{$t('order.product_discount_label')}}</span>
              {{ detail.productReduceMoney }}
            </div>
          </el-col>

          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.actual_payment_label')}}</span>
              {{ detail.payPrice }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.payment_method_label')}}</span>
              {{ detail.payTypeText }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.delivery_method_label')}}</span>
              {{ detail.deliveryTypeText }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.order_time_label0')}}</span>
              {{ detail.createTime }}
            </div>
          </el-col>
          <el-col :span="5" v-if="detail.receiptTime">
            <div class="pb16">
              <span class="gray9">{{$t('order.completion_time_label')}}</span>
              {{ detail.receiptTime }}
            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.transaction_status_label')}}</span>
              {{ detail.orderStatusText }}
            </div>
          </el-col>
          <el-col :span="5" v-if="detail.orderSource == 80">
            <div class="pb16">
              <span class="gray9">{{$t('order.deposit_label')}}</span>
              {{ detail.money }}
            </div>
          </el-col>
          <el-col :span="5" v-if="detail.orderSource == 80">
            <div class="pb16">
              <span class="gray9">{{$t('order.final_payment_label')}}</span>
              {{ detail.balancePayment }}
            </div>
          </el-col>
          <el-col
            :span="5"
            v-if="detail.orderSource == 80 && detail.reduceMoney"
          >
            <div class="pb16">
              <span class="gray9">{{$t('order.final_payment_discount_label')}}</span>
              {{ detail.reduceMoney }}
            </div>
          </el-col>
          <!-- <el-col :span="5" v-if="
              detail.payStatus == 10 &&
              detail.orderStatus == 10 &&
              detail.orderSource == 10
            " v-auth="'/order/order/updatePrice'">
						<el-button @click="editClick(detail)" size="small">修改价格</el-button>
					</el-col> -->
           <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.shopremak')}}：</span>
              {{ detail.shopRemark }}
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 编辑 -->
      <!-- <Add v-if="open_edit" :open_edit="open_edit" :order="userModel" @close="closeDialogFunc($event, 'edit')">
			</Add> -->
      <!--商户信息-->
      <div class="common-form mt16">{{$t('order.merchant_info')}}</div>
      <div class="table-wrap">
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.merchant_name_label')}}</span>
              {{ detail.supplierName }}
            </div>
          </el-col>
        </el-row>
      </div>
      <!--商品信息-->
      <div class="common-form mt16">{{$t('order.product_info')}}</div>
      <div class="table-wrap">
        <el-table
          size="small"
          :data="detail.productList"
          border
          style="width: 100%"
        >
          <el-table-column prop="productName" :label="$t('order.product')" width="400">
            <template #default="scope">
              <div class="product-info">
                <div class="pic"><img v-img-url="scope.row.imagePath" /></div>
                <div class="info">
                  <div class="name">{{ scope.row.productName }}</div>
                  <!-- <div class="gray9" v-if="scope.row.productAttr!=''">{{scope.row.productAttr}}</div>
                  <div class="orange" v-if="scope.row.refund">
                    {{ scope.row.refund.type.text }}-{{ scope.row.refund.status.text }}
                  </div> -->
                  <div class="price">
                    <span
                      :class="{
                        'text-d-line': scope.row.isUserGrade == 1,
                        gray6: scope.row.isUserGrade != 1,
                      }"
                      >￥ {{ scope.row.productPrice }}</span
                    >
                    <span class="ml10" v-if="scope.row.isUserGrade == 1"
                      >{{$t('order.member_price_label',{place1:scope.row.gradeProductPrice})}}</span
                    >
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="productNo" :label="$t('order.product_code')"></el-table-column>
          <el-table-column
            prop="productWeight"
            :label="$t('order.product_weight0')"
          ></el-table-column>
          <el-table-column prop="totalNum" :label="$t('order.purchase_quantity0')">
            <template #default="scope">
              <p>x {{ scope.row.totalNum }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="totalPrice" :label="$t('order.product_total_price')">
            <template #default="scope">
              <p>￥ {{ scope.row.totalPrice }}</p>
            </template>
          </el-table-column>
          <!--表单信息-->
          <el-table-column :label="$t('order.form_info')">
            <template #default="scope">
              <div v-if="scope.row.tableRecordId > 0">
                <div v-for="(item, index) in scope.row.tableData" :key="index">
                  {{ item.name }}:{{ item.value }}
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 收货信息 -->
      <div v-if="detail.deliveryType == 10">
        <div class="common-form mt16">{{$t('order.shipping_info')}}</div>
        <div class="table-wrap">
          <el-row>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.receiver_name_label')}}</span>
                {{ detail.address.name }}
              </div>
            </el-col>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.receiver_phone_label')}}</span>
                {{ detail.address.phone }}
              </div>
            </el-col>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.receiver_address_label')}}</span>
                {{ detail.address.region.province }}
                {{ detail.address.region.city }}
                {{ detail.address.region.region }} {{ detail.address.detail }}
              </div>
            </el-col>
            <el-col
              :span="5"
              v-if="detail.deliveryStatus != 20 && detail.orderStatus == 10"
            >
              <div class="pb16">
                <el-button type="text" size="small" @click="changeAdd"
                  >{{$t('order.edit_address')}}</el-button
                >
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="25">
              <div class="pb16">
                <span class="gray9">{{$t('order.remark_label')}}</span>
                {{ detail.buyerRemark }}
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 自提门店信息 -->
      <template v-if="detail.deliveryType == 20">
        <div class="common-form mt16">{{$t('order.pickup_user_info')}}</div>
        <div class="table-wrap" v-if="detail.orderExtract">
          <el-row>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.contact_person_label')}}</span>
                {{ orderExtract.linkman }}
              </div>
            </el-col>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.contact_phone_label')}}</span>
                {{ orderExtract.phone }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="25">
              <div class="pb16">
                <span class="gray9">{{$t('order.remark_label')}}</span>
                {{ detail.buyerRemark }}
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="common-form mt16">{{$t('order.pickup_info')}}</div>
        <div class="table-wrap" v-if="detail.extractStore">
          <el-row>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.store_id_label')}}</span>
                {{ detail.extractStore.storeId }}
              </div>
            </el-col>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.store_name_label')}}</span>
                {{ detail.extractStore.storeName }}
              </div>
            </el-col>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.contact_person_label')}}</span>
                {{ detail.extractStore.linkman }}
              </div>
            </el-col>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.contact_phone_label')}}</span>
                {{ detail.extractStore.phone }}
              </div>
            </el-col>
            <el-col :span="15">
              <div class="pb16">
                <span class="gray9">{{$t('order.store_address_label')}}</span>
                {{ detail.extractStore.address }}
              </div>
            </el-col>
          </el-row>
        </div>
      </template>
      <!--无需发货-->
      <template v-if="detail.deliveryType == 30">
        <div class="common-form mt16">{{$t('order.user_info')}}</div>
        <div class="table-wrap">
          <el-row>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.user_phone_label')}}</span>
                {{ detail.mobile }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="25">
              <div class="pb16">
                <span class="gray9">{{$t('order.remark_label')}}</span>
                {{ detail.buyerRemark }}
              </div>
            </el-col>
          </el-row>
        </div>
      </template>
      <!--付款信息-->
      <div class="" v-if="detail.payStatus == 20">
        <div class="common-form mt16">{{$t('order.payment_info')}}</div>
        <div class="table-wrap">
          <el-row>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.amount_due_label')}}</span>
                {{ detail.payPrice }}
              </div>
            </el-col>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.payment_method_label')}}</span>
                {{ detail.payTypeText }}
              </div>
            </el-col>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.payment_transaction_id')}}</span>
                {{ detail.transactionId }}
              </div>
            </el-col>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.payment_status_label')}}</span>
                {{ detail.payStatusText }}
              </div>
            </el-col>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.payment_time_label')}}</span>
                {{ detail.payTime }}
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="table-wrap" v-if="customForm && customForm.length > 0">
        <div class="common-form mt16">{{$t('order.form_info')}}</div>
        <div class="table-wrap">
          <ul class="list">
            <li
              class="item"
              :class="{ pic: item.label == 'img' }"
              :span="item.label !== 'text' ? 12 : 24"
              v-for="(item, index) in customForm"
              :key="index"
            >
              <template v-if="item.label !== 'img'">
                <div>{{ item.title }}：{{ item.value }}</div>
              </template>
              <template v-else>
                <div>{{ item.title }}：</div>
                <div v-for="(img, i) in item.value" :key="i" class="">
                  <el-image
                    style="width: 100px"
                    :src="img.filePath"
                    :preview-src-list="[img.filePath]"
                    alt=""
                  />
                </div>
              </template>
            </li>
          </ul>
        </div>
      </div>
      <!--  用户取消订单 -->
      <div
        v-if="detail.payStatus == 20 && detail.orderStatus == 21"
        v-auth="'/order/operate/confirmCancel'"
      >
        <div class="common-form mt16">{{$t('order.user_cancel_order')}}</div>
        <p class="red pb16"> {{$t('order.cancel_order_notice')}} 

</p>
        <el-form size="small" ref="forms" :model="forms">
          <el-form-item :label="$t('order.review_status0')">
            <div>
              <el-radio v-model="forms.isCancel" :label="1" :value="1"
                >{{$t('order.agree')}}</el-radio
              >
              <el-radio v-model="forms.isCancel" :label="0" :value="0"
                >{{$t('order.reject')}}</el-radio
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
      <!--发货信息-->
      <div
        v-if="
          detail.payStatus == 20 &&
          (detail.deliveryType == 10 || detail.deliveryType == 40) &&
          [20, 21].indexOf(detail.orderStatus) === -1 &&
          (!detail.assembleStatus || detail.assembleStatus == 20)
        "
      >
        <!-- <div v-if="detail.deliveryStatus == 10"> -->
        <!-- 去发货 -->
        <!--          <div class="common-form mt16">去发货</div>
          <el-form size="small" ref="form" :model="form" label-width="100px">
            <el-form-item label="物流公司">
              <el-select v-model="form.expressId" placeholder="请选择快递公司">
                <el-option :label="item.expressName" v-for="(item, index) in expressList" :key="index" :value="item.expressId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物流单号"><el-input v-model="form.expressNo" class="max-w460"></el-input></el-form-item>
          </el-form> -->
        <!-- </div> -->
        <div v-if="detail.deliveryStatus == 20 || detail.deliveryStatus == 30">
          <div class="common-form mt16">{{$t('order.shipping_details')}}</div>
          <div class="table-wrap">
            <div v-if="detail.deliveryType == 10">
              <el-row>
                <el-col :span="5">
                  <div class="pb16">
                    <span class="gray9">{{$t('order.logistics_company_label')}}</span>
                    {{ detail.express.expressName }}
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="pb16">
                    <span class="gray9">{{$t('order.logistics_number_label')}}</span>
                    {{ detail.expressNo }}
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="pb16">
                    <span class="gray9">{{$t('order.shipping_status_label')}}</span>
                    {{ detail.deliveryStatusText }}
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="pb16">
                    <span class="gray9">{{$t('order.shipping_time_label')}}</span>
                    {{ detail.deliveryTime }}
                  </div>
                </el-col>
                <el-col :span="5" v-if="detail.isLabel">
                  <div class="pb16 d-s-s">
                    <div class="gray9">{{$t('order.e_waybill_label')}}</div>
                    <el-image
                      style="width: 100px"
                      :src="detail.label"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="[detail.label]"
                      :initial-index="0"
                      fit="cover"
                    />
                  </div>
                </el-col>
              </el-row>
            </div>
            <div v-else-if="detail.deliveryType == 40">
              <el-table
                size="small"
                :data="detail.orderDeliverList"
                border
                style="width: 100%"
              >
                <el-table-column prop="productName" label="#" width="100">
                  <template #default="{ $index }"> {{$t('order.package_count_label',{place1:$index + 1})}}

                  </template>
                </el-table-column>
                <el-table-column prop="product_name" :label="$t('order.product')">
                  <template #default="{ row }">
                    <template v-for="v in row.productList" :key="v">
                      <div class="product-info pb16">
                        <div class="pic"><img v-img-url="v.imagePath" /></div>
                        <div class="info d-b-s d-c">
                          <div class="name">{{ v.productName }}</div>
                          <div class="price">{{$t('order.shipped_quantity_label',{place1:v.deliveryNum})}}</div>
                        </div>
                      </div>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('order.e_waybill')">
                  <template #default="{ row }">
                    <el-image
                      v-if="row.label"
                      style="width: 100px; height: 100px"
                      :src="row.label"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="[row.label]"
                      :initial-index="0"
                      fit="cover"
                    />
                  </template>
                </el-table-column>
                <el-table-column prop="expressName" :label="$t('order.courier_type')" />
                <el-table-column prop="expressNo" :label="$t('order.courier_number')" />
                <el-table-column prop="createTime" :label="$t('order.shipping_time')" />
                <el-table-column prop="remark" :label="$t('order.remark')" />
                <el-table-column fixed="right" :label="$t('order.action')">
                  <template #default="scope">
                    <el-button
                      type="text"
                      size="small"
                      v-auth="'/order/order/express'"
                      @click="getLogistics(scope.row)"
                      >{{$t('order.logistics_query')}} 
</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <!--取消信息-->
      <div
        class="table-wrap"
        v-if="detail.orderStatus == 20 && detail.cancelRemark != ''"
      >
        <div class="common-form mt16">{{$t('order.cancel_info')}}</div>
        <div class="table-wrap">
          <el-row>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.merchant_remark_label')}}</span>
                {{ detail.cancelRemark }}
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <!--门店自提核销-->
      <div
        v-if="
          detail.deliveryType == 20 &&
          detail.payStatus == 20 &&
          detail.orderStatus != 21 &&
          detail.orderStatus != 20
        "
        v-auth="'/order/order/operate/extract'"
      >
        <div class="common-form mt16">{{$t('order.store_pickup_verification')}}</div>
        <div v-if="detail.deliveryStatus == 10">
          <el-form
            size="small"
            ref="extract_form"
            :model="extract_form"
            label-width="100px"
          >
            <el-form-item :label="$t('order.store_verifier')">
              <el-select v-model="extractClerkId" :placeholder="$t('order.click_to_select')">
                <el-option
                  :label="item.realName"
                  v-for="(item, index) in shopClerkList"
                  :key="item.clerkId"
                  :value="item.clerkId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('order.buyer_pickup_status')"
              ><el-radio v-model="extract_form.order.extractStatus" :label="1"
                >{{$t('order.picked_up')}}</el-radio
              ></el-form-item
            >
            <el-form-item
              ><el-button type="primary" @click="onExtract(detail.orderId)"
                >{{$t('order.confirm_verification')}}</el-button
              ></el-form-item
            >
          </el-form>
        </div>
        <div v-else class="table-wrap">
          <template v-if="detail.extractClerkId">
            <el-row>
              <el-col :span="5">
                <div class="pb16">
                  <span class="gray9">{{$t('order.pickup_store_name')}}</span>
                  {{ detail.extractStoreName }}
                </div>
              </el-col>
              <el-col :span="5">
                <div class="pb16">
                  <span class="gray9">{{$t('order.verifier_label')}}</span>
                  {{ detail.extractClerkName }}
                </div>
              </el-col>
              <el-col :span="5">
                <div class="pb16">
                  <span class="gray9">{{$t('order.verification_status')}}</span>
                  <template v-if="detail.deliveryStatus == 20"> {{$t('order.verified')}} 

</template>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="pb16">
                  <span class="gray9">{{$t('order.verification_time')}}</span>
                  {{ detail.deliveryTime }}
                </div>
              </el-col>
            </el-row>
          </template>
        </div>
      </div>
      <!--查看虚拟物品发货-->
      <div
        v-if="
          detail.deliveryType == 30 &&
          detail.payStatus == 20 &&
          detail.orderStatus != 21 &&
          detail.orderStatus != 20
        "
        v-auth="'/order/order/delivery'"
      >
        <div class="common-form mt16">{{$t('order.virtual_delivery')}}</div>
        <div v-if="detail.deliveryStatus == 10">
          <div class="pb16"><span class="gray9">{{$t('order.shipping_status_label')}}</span>{{$t('order.pending_shipment')}}</div>
        </div>
        <div v-else class="table-wrap">
          <template v-if="detail.virtualContent">
            <el-row>
              <el-col :span="5">
                <div class="pb16">
                  <span class="gray9">{{$t('order.shipment_info_label')}}</span>
                  {{ detail.virtualContent }}
                </div>
              </el-col>
              <el-col :span="5">
                <div class="pb16">
                  <span class="gray9">{{$t('order.shipping_status_label')}}</span>
                  <template v-if="detail.deliveryStatus == 20"> {{$t('order.shipped0')}} 

</template>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="pb16">
                  <span class="gray9">{{$t('order.shipping_time_label')}}</span>
                  {{ detail.deliveryTime }}
                </div>
              </el-col>
            </el-row>
          </template>
        </div>
      </div>
    </div>
    <changeAddress
      v-if="addressData != null"
      :isChange="isChange"
      :addressData="addressData"
      @closeDialog="closeAddress"
    ></changeAddress>
    <Logistics
      v-if="isLogistics"
      :logisticsData="logisticsData"
      :isLogistics="isLogistics"
      @closeDialog="closeLogistics"
    ></Logistics>
    <div class="common-button-wrapper">
      <el-button size="small" type="info" @click="cancelFunc"
        >{{$t('order.cancel_or_back')}}</el-button
      >
    </div>
  </div>
</template>

<script>
import OrderApi from "@/api/order.js";
import changeAddress from "@/components/order/changeAddress.vue";
// import Add from "./dialog/Add.vue";
import { deepClone } from "@/utils/base.js";
import Logistics from "@/components/logistics/viewLogistics.vue";
export default {
  components: {
    // Add,
    changeAddress,
    Logistics
  },
  data() {
    return {
      active: 0,
      /*是否加载完成*/
      loading: true,
      /*订单数据*/
      detail: {
        payStatus: [],
        payType: [],
        deliveryType: [],
        user: {},
        address: [],
        product: [],
        orderStatus: [],
        extract: [],
        extractStoreId: [],
        express: [],
        deliveryStatus: [],
        extractClerk: {}
      },
      extractClerkId: "",
      /*是否打开添加弹窗*/
      open_add: false,
      /*一页多少条*/
      pageSize: 20,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      /*发货*/
      form: {
        /*订单ID*/
        expressId: null,
        /*订单号*/
        expressNo: ""
      },
      forms: {
        isCancel: 1
      },
      extract_form: {
        order: {
          extractStatus: 1
        }
      },
      /*虚拟商品发货*/
      virtual_form: {
        virtualContent: ""
      },
      order: {},
      deliveryType: 0,
      /*配送方式*/
      exStyle: [],
      /*门店列表*/
      shopList: [],
      /*当前编辑的对象*/
      userModel: {},
      /*时间*/
      createTime: "",
      /*快递公司列表*/
      expressList: [],
      shopClerkList: [],
      orderExtract: {},
      isChange: false,
      /*是否打开编辑弹窗*/
      // open_edit: false,
      addressData: null,
      customForm: [],
      logisticsData: {},
      isLogistics: false
    };
  },
  created() {
    /*获取列表*/
    this.getParams();
  },
  methods: {
    getLogistics(row) {
      let self = this;
      let Params = {
        orderId: row.orderId,
        expressId: row.expressId,
        expressNo: row.expressNo
      };
      self.loading = true;
      OrderApi.orderExpress(Params, true).then(res => {
        self.loading = false;
        self.logisticsData = res.data.express.data;
        console.log(self.logisticsData);
        self.openLogistics();
      }).catch(error => {
        self.loading = false;
      });
    },
    openLogistics() {
      this.isLogistics = true;
    },
    closeLogistics() {
      this.isLogistics = false;
    },
    next() {
      if (this.active++ > 4) this.active = 0;
    },
    /*获取参数*/
    getParams() {
      let self = this;
      // 取到路由带过来的参数
      const params = this.$route.query.orderId;
      OrderApi.orderdetail({
        orderId: params
      }, true).then(res => {
        self.loading = false;
        self.detail = res.data;
        console.log(self.detail.deliveryStatus == 10);
        self.expressList = res.data.expressList;
        self.customForm = JSON.parse(self.detail.customFormStr);
        self.shopClerkList = res.data.shopClerkList;
        self.addressData = res.data.address;
        self.orderExtract = res.data.orderExtract;
      }).catch(error => {
        self.loading = false;
      });
    },
    /*发货*/
    onSubmit() {
      let self = this;
      let param = self.form;
      if (param.expressId == null) {
        ElMessage.error($t("order.select_logistics_company0"));
        return;
      }
      if (param.expressNo == "") {
        ElMessage.error($t("order.input_logistics_number"));
        return;
      }
      let orderId = this.$route.query.orderId;
      OrderApi.delivery({
        expressId: param.expressId,
        expressNo: param.expressNo,
        orderId: orderId
      }, true).then(data => {
        self.loading = false;
        ElMessage({
          message: $t("order.delivery_success"),
          type: "success"
        });
        self.getParams();
      }).catch(error => {
        self.loading = false;
      });
    },
    /*确认取消*/
    confirmCancel() {
      let self = this;
      let orderId = this.$route.query.orderId;
      let isCancel = self.forms.isCancel;
      OrderApi.confirm({
        orderId: orderId,
        isCancel: isCancel
      }, true).then(data => {
        self.loading = false;
        ElMessage({
          message: $t("order.review_success"),
          type: "success"
        });
        self.getParams();
      }).catch(error => {
        self.loading = false;
      });
    },
    /*核销*/
    onExtract(e) {
      let self = this;
      let extract_form = self.extract_form;
      let param = {};
      param.orderId = e;
      param.extractStatus = extract_form.order.extractStatus;
      param.extractClerkId = self.extractClerkId;
      OrderApi.extract(param, true).then(data => {
        self.loading = false;
        ElMessage({
          message: $t("order.operation_success"),
          type: "success"
        });
        self.getParams();
      }).catch(error => {
        self.loading = false;
      });
    },
    /*虚拟商品发货*/
    onVirtual(e) {
      let self = this;
      let virtual_form = self.virtual_form;
      if (virtual_form.virtualContent == "") {
        ElMessage.error($t("order.input_shipping_info"));
        return;
      }
      virtual_form.order_id = e;
      OrderApi.virtual({
        order_id: virtual_form.order_id,
        virtualContent: virtual_form.virtualContent
      }, true).then(data => {
        self.loading = false;
        ElMessage({
          message: $t("order.operation_success"),
          type: "success"
        });
        self.getParams();
      }).catch(error => {
        self.loading = false;
      });
    },
    closeAddress(e) {
      let self = this;
      if (e == false) {
        self.isChange = false;
        return false;
      }
      let params = e.params;
      params.orderId = self.$route.query.orderId;
      OrderApi.updateAddress(params, true).then(data => {
        self.getParams();
        ElMessage({
          message: $t("order.update_success"),
          type: "success"
        });
      }).catch(error => {});
      self.isChange = false;
    },
    /*打开编辑*/
    editClick(item) {
      this.userModel = deepClone(item);
      this.open_edit = true;
    },
    /*关闭弹窗*/
    closeDialogFunc(e, f) {
      if (e && f == "edit") {
        this.open_edit = e.openDialog;
        this.getParams();
      }
    },
    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    },
    changeAdd() {
      this.isChange = true;
    }
  }
};
</script>

<style scoped>
.list {
  display: flex;
  margin-top: 20px;
  width: auto;
  overflow-x: auto;
  list-style: none;
  padding: 0;

  .item {
    flex: none;
    width: 200px;
    font-size: 14px;
    line-height: 14px;
    color: rgba(0, 0, 0, 0.85);

    .title {
      margin-bottom: 12px;
      font-size: 13px;
      line-height: 13px;
      color: #666666;
    }

    .value1 {
      color: #f56022;
    }

    .value2 {
      color: #1bbe6b;
    }

    .value3 {
      color: var(--prev-color-primary);
    }

    .value4 {
      color: #6a7b9d;
    }

    .value5 {
      color: #f5222d;
    }
  }
}

.img {
  width: 100%;
  height: 100%;
}
</style>

